<template>
  <q-layout view="lHh Lpr lFf">
    <q-header v-if="isMobile"> </q-header>
    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer elevated v-if="isMobile" bordered class="bg-blue-4 text-white">
      <q-tabs no-caps v-model="tab">
        <q-tab name="home" @click="toRoute('/')">
          <template #default>
            <q-icon size="24px">
              <img src="/public/images/dog.png" />
            </q-icon>
          </template>
        </q-tab>

        <q-tab name="blog" @click="toRoute('/blog')">
          <template #default>
            <q-icon name="rss_feed" size="24px"> </q-icon>
          </template>
        </q-tab>

        <q-tab name="cloud" @click="toRoute('/cloud')">
          <template #default>
            <q-icon name="cloud_upload" size="24px"> </q-icon>
          </template>
        </q-tab>

        <q-tab name="search" @click="toRoute('/search')">
          <template #default>
            <q-icon name="search" size="24px"> </q-icon>
          </template>
        </q-tab>
      </q-tabs>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

defineOptions({
  name: "MainLayout",
});

const tab = ref("home");
const windowWidth = ref(window.innerWidth);

const isMobile = computed(() => {
  return windowWidth.value < 650;
});

const toRoute = (to) => {
  tab.value = to.replace(/\//g, "");
  router.push(to);
};

const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(async () => {
  window.addEventListener("resize", handleResize);

  tab.value = router.currentRoute.value.path.split("/")[1];
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped></style>
